<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>购物车</el-breadcrumb-item>
      <el-breadcrumb-item >我的商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="margintop20">
      <el-col>
        <el-table
          :data="cart"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          style="width: 100%"
        >
          <el-table-column label="#" type="index"></el-table-column>

          <el-table-column width="50">
              <template slot="header" >
                  <el-checkbox  v-model="quan"> </el-checkbox>
              </template>
              <template slot-scope="scope">
                  <el-checkbox @change="changechecked(scope.row)" v-model="scope.row.checked" ></el-checkbox>
              </template>
          </el-table-column>

          <el-table-column label="电影名称" width="200">
            <template slot-scope="scope">{{scope.row.list.name}}</template>
          </el-table-column>
          <el-table-column label="影片海报" width="140">
            <template slot-scope="scope"><img :src="scope.row.list.poster" class="myimg" alt=""></template>
          </el-table-column>
          <el-table-column label="单价">
            <template slot-scope="scope">￥{{scope.row.price}}</template>
          </el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <el-input-number @change="getCurrentcount(scope.row)"  v-model="scope.row.count" :min="1"  ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小计">
            <template slot-scope="scope">
              ￥ {{(scope.row.price * scope.row.count).toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope" >
                <el-popconfirm
                  confirmButtonText='残忍移除'
                  cancelButtonText='再想想'
                  icon="el-icon-info"
                  iconColor="red"
                  title="真的舍得错过这场吗？"
                  @onConfirm="delOne(scope.row)"
                  >
                  <el-button slot="reference" size="mini" type="danger">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
        </el-table>
        <div class="margintop20 carbox">
                    <div>
                         <!-- <el-checkbox>全选反选</el-checkbox> -->
                         <el-button @click="delCheck" style="margin-left:10px;" type="danger" size="mini" >批量删除</el-button>
                    </div>
                    <div>
                        总数量 :  {{ total }}    / 选中数量 {{checktotal}}
                    </div>
                    <div>
                        总价格 :  {{ amount }}    / 选中价格 {{checkamount}}
                    </div>
                </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getmycar,delcarone,changecarcount,changecarcheck,delcarcheck } from "@/api";
export default {
  data() {
    return {
      cart: [],
    };
  },
  methods:{
    delCheck(){//将选中的删除
      delcarcheck()
            .then(res=>{
                if(res.type){
                    this.cart = this.cart.filter(item=>!item.checked);
                }
            })
    },
    changechecked(row){//单选修改选中
    console.log(row);
        changecarcheck({
                filmId:row.filmId,
                checked:row.checked
            })
            .then(res=>{

            })
    },
    getCurrentcount(row){//数量修改函数
      changecarcount({
        filmId:row.filmId,
        count:row.count
      })
      .then(res=>{
        
      })
    },
    delOne(row){//删除函数
      delcarone({
        filmId:row.filmId
      }).then(res=>{
        if(res.type){
          this.cart = this.cart.filter(item=>item._id!==row._id)//前端利用过滤将删除的哪行数据移出
        }
      })
    },
  },
  computed:{//计算属性
      quan:{//全反选的
        get(){//单选控制全选
          var flag = true;
          this.cart.forEach(item=>{//循环每一个单选，判断每一个单选状态，以此来修改全选
            if(!item.checked){
              flag = false;
            }
          })
          return flag
        },
        set(newVal){//全选控制单选
          this.cart = this.cart.map(item=>{//操作每一个单选键，使其的状态与全选一致
              item = {...item,checked:newVal}
              return item;
          });
          changecarcheck({
                    checked:newVal
                })
                .then(res=>{

                })
        }
      },
      total(){//总数量
        var total = 0;
        this.cart.forEach(item=>{
          total += item.count;
        })
        return total
      },
      amount(){//总价
        var amount = 0;
        this.cart.forEach(item=>{
          amount += item.count * item.price
        })
        return amount.toFixed(2)
      },
      checktotal(){//选中后的总数
        var checktotal = 0;
        this.cart.forEach(item=>{
          if(item.checked){
            checktotal += item.count;
          }
        })
        return checktotal
      },
      checkamount(){//选中后的总数
        var checkamount = 0;
        this.cart.forEach(item=>{
          if(item.checked){
            checkamount += item.count * item.price;
          }
        })
        return checkamount
      },
  },
  mounted() {
    getmycar({
      mobile:localStorage.getItem('mobile')
    })//先拿到cart渲染列表
    .then((res) => {
      if (res.type) {
        this.cart = res.result;
        this.cart = this.cart
        console.log(this.cart.slice(0,this.cart.length));
      }
    });
    
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0px;
}
.myimg{
  width: 120px;
  height: 120px;
}
.carbox{
    display: flex;
    background-color: #fff;
    width: 550px;
    height: 35px;
    line-height: 35px;
    border-radius: 10px;
    div{
        margin:0 10px; 
        font-size:14px;
        color:#303133;
    }
}
::v-deep .el-table__body-wrapper{
  width: 1460px;
  height: 434px !important;
  overflow: auto;
}
::v-deep .el-breadcrumb__inner {
  color: rgb(240, 124, 124) !important;
}
.el-breadcrumb {
  font-size: 30px;
  
}
</style>